<template>
  <div>
    <img v-if="firstLoading" class="gxb-loading" src="/public/images/loding.gif" alt="">
    <div class="empty" v-if="!firstLoading&&coupon.data.length ==0 ">
      <span>目前没有优惠券</span>
    </div>
    <div>
      <div class="coupon-list" v-if="coupon.data.length !=0 ">
        <div class="item" v-for="(item,index) in coupon.data">
          <div class="left">
            <div class="p-price">¥{{item.cMoney}}</div>
            <div class="p-sm">满{{item.cCondition}}元减{{item.cMoney}}元</div>
          </div>
          <div class="right">
            <div class="p"> 优惠券号：{{item.couponSn}}</div>
            <div class="p">全场通用（个别商品除外)</div>
            <div class="p">{{item.sDate}}—{{item.eDate}}</div>
          </div>
        </div>
      </div>
      <div v-if="coupon.pageNum>coupon.page">
        <div class="list-loading" v-if="loading">
          <img src="/public/images/loading-min.gif" alt="">
        </div>
        <div class="list-loadmore">
          <button class="loadmore-btn" @click="loadMore">
            加载更多
          </button>
        </div>
      </div>
      <div class="list-complete" v-if="coupon.pageNum!=0 && (coupon.pageNum<=coupon.page)">
        <img src="/public/images/min-logo.png" alt="">
      </div>
    </div>
  </div>
</template>

<script lang="babel">
  import {mapGetters} from 'vuex'
  const fetchCouponData = async(store, {page, couponState}) => {
    return await store.dispatch('backend/coupon/getCoupon', {page, couponState})
  }
  export default {
    data() {
      return {
        firstLoading: false,
        loading: false
      }
    },
    computed: {
      ...mapGetters({
        coupon: 'backend/coupon/getCoupon'
      })
    },
    mounted () {
      this.initData()
    },
    beforeRouteUpdate (to, from, next) {
      next()
      this.initData()
    },
    methods: {
      async initData () {
        this.firstLoading = true;
        let couponState = Number(this.$route.params.state)
        let StatusCode = await fetchCouponData(this.$store, {page: 1, couponState})
        if (StatusCode !== '200') {
          this.$router.replace({name: 'login', query: {redirect: '/jifen'}})
          return
        }
        this.firstLoading = false;
      },
      loadMore() {
        let page = this.coupon.page + 1;
        let couponState = Number(this.$route.params.state)
        if (page <= this.coupon.pageNum) {
          this.loading = true;
          fetchCouponData(this.$store, {page, couponState})
          this.loading = false;
        }
      }
    }
  }
</script>